<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>部门</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="/febs/page-transitions/js/jquery.min.js"></script>
    <script th:src="@{/page/js/vue.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/page/js/qrcode.js}" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../page/page.css" media="all">
    <link rel="stylesheet" href="../page/index.css" media="all">
</head>
<style>
    #qrcode {
        /*width: 80px;
        height: 80px;*/
        margin-top: 20px;
        margin-right: 100px;
        float: right;
        border: #fff 3px solid;
    }

</style>
<body>
<div class="deptDiv" id="app" @click="pageClick">
    <div style="clear:both;margin-top: 200px" ></div>
    <div class="titleDiv">
        一网通办
    </div>

    <div class="titleTextDiv">
        <span>项目名称</span>
        <img src="/page/img/03-jt.png" height="10px">
        <span >事项名称</span>
        <img src="/page/img/03-jt.png" height="10px">
        <span style="color: #4afffc;">详细信息</span>
    </div>
    <div style="clear:both"></div>
    <div class="deptContentDiv">
        <!--<div class="itemContentLineDiv">
            <div class="itemContentLineTitleDiv"></div>
            <div class="itemContentLineViewDiv"></div>
            <div style="clear:both"></div>
        </div>-->
        <table style="border:none">
            <tr>
                <td class="itemTd1">事项名称:</td>
                <td class="itemTd2" th:text="${itemList[0].name}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">实施主体:</td>
                <td class="itemTd2" th:text="${itemList[0].sszt}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">是否支持自助终端办理:</td>
                <td class="itemTd2" th:text="${itemList[0].sfzczzzdbl}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">是否支持预约办理:</td>
                <td class="itemTd2" th:text="${itemList[0].sfzcyybl}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">事项类型:</td>
                <td class="itemTd2" th:text="${itemList[0].sxlx}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">办件类型:</td>
                <td class="itemTd2" th:text="${itemList[0].bjlx}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">通办范围:</td>
                <td class="itemTd2" th:text="${itemList[0].tbfw}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">网上办理深度:</td>
                <td class="itemTd2" th:text="${itemList[0].wsblsd}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">办公时间:</td>
                <td class="itemTd2" th:text="${itemList[0].bgsj}"> 事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">申请条件:</td>
                <td class="itemTd2" th:text="${itemList[0].sqtj}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">行使内容:</td>
                <td class="itemTd2" th:text="${itemList[0].xsnr}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">办理地点:</td>
                <td class="itemTd2" th:text="${itemList[0].bldd}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">办理流程:</td>
                <td class="itemTd2" th:text="${itemList[0].bllc}">事项名称事项名称事项名称事项名称</td>
            </tr>
            <tr>
                <td class="itemTd1">监督投诉:</td>
                <td class="itemTd2" th:text="${itemList[0].jdts}">事项名称事项名称事项名称事项名称</td>
            </tr>

        </table>
        <div class="qr-code" >
            <div id="qrcode"></div>
            <p style="color: #fff; font-size: 13px">手机扫一扫，把我带走</p>
        </div>

    </div>


    <div>
        <!-- 主页按钮图片 -->
        <img class="img-people-yuyue" @click.stop="tapHome"
             :style="isMove && isYueShow ? yueStyle:''" :class="{'img-yuyue-show': isYueShow}"
             th:src="@{img/08-zy.png}">
        <!--返回按钮图片-->
        <img class="img-yuyue" @click.stop="tapBack"
             :style="isMove && isYueShow ? yueStyle:''" :class="{'img-yuyue-show': isYueShow}"
             th:src="@{img/09-fh.png}">
    </div>


</div>
<script th:inline="javascript">
    var itemId = [[${id}]];
    console.log(itemId)

    $(function () {
        $('.titleDiv').html(sessionStorage.getItem("key"))
        $('.deptContentTitleDiv').html(sessionStorage.getItem("key")+"项目名称")
        makeCode();
    });


    // 生成二维码的方法
    function makeCode () {
        // 二维码地址
        var url = "http://47.93.121.168:8001/page/itemQrCode?type=personal&id="+itemId;
        var qrcode = new QRCode("qrcode",
            {
            text : url,
            width : 128,
            height : 128
            }
        );



    }


    // 鼠标位置和div的左上角位置 差值
    var dx, dy
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;
    var vm = new Vue({
        el: '#app',
        data: {
            commonNoticeShow:true,
            notice:{},
            radio:'1',
            isYueShow: false, // 按钮图片是否完全显示
            isPeopleYuYueShow:true,
            flags: false,
            isMove: false,
            position: {
                x: 0,
                y: 0
            }
        },
        mounted:function() {},
        computed: {
            yueStyle:function(){
                if(this.position.y == 0 && this.position.x == 0) {
                    return ''
                }
                var styles = {
                    top: this.position.y+'px',
                    left: this.position.x+'px'
                }
                return styles
            }
        },
        created:function(){},
        methods: {
            // 页面级的点击事件
            pageClick:function(){
                this.isYueShow = false;
            },
            deptClick:function(index){
                if(index%2==0){

                }
            },
            // 主页按钮事件
            tapHome:function() {
                if (this.isYueShow) {
                    //跳转到主页
                    window.location='/page/index'
                }
                this.position.x = 0;
                this.position.y = 0;
                this.isYueShow = !this.isYueShow;
            },
            // 返回按钮事件
            tapBack:function() {
                if (this.isYueShow) {
                    //跳转到上一页
                    window.history.go(-1);
                }
                this.position.x = 0;
                this.position.y = 0;
                this.isYueShow = !this.isYueShow;
            },
            // 实现移动端拖拽
            down:function(event) {
                this.flags = true;
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                dx = touch.clientX - event.target.offsetLeft
                dy = touch.clientY - event.target.offsetTop
            },
            move:function() {
                this.isMove = true;
                if (this.flags) {
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    this.isYueShow = true;
                    // 定位滑块的位置
                    this.position.x = touch.clientX - dx;
                    this.position.y = touch.clientY - dy;
                    // 限制滑块超出页面
                    // console.log('屏幕大小', screenWidth, screenHeight )
                    if (this.position.x < 0) {
                        this.position.x = 0
                    } else if (this.position.x > screenWidth - touch.target.clientWidth) {
                        this.position.x = screenWidth - touch.target.clientWidth
                    }
                    if (this.position.y < 0) {
                        this.position.y = 0
                    } else if (this.position.y > screenHeight - touch.target.clientHeight) {
                        this.position.y = screenHeight - touch.target.clientHeight
                    }
                    //阻止页面的滑动默认事件
                    document.addEventListener("touchmove", function() {
                        event.preventDefault();
                    }, false);
                }
            },
            //鼠标释放时候的函数
            end:function() {
                this.flags = false;
            },


        }
    })


</script>
</body>
</html>